<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XLS文件上传测试</title>
    <!-- 加载SheetJS库 -->
    <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
        .container { border: 1px solid #ddd; padding: 20px; border-radius: 5px; }
        .upload-area { border: 2px dashed #ccc; padding: 20px; text-align: center; margin: 20px 0; }
        .upload-area:hover { border-color: #333; }
        #file-input { display: none; }
        button { padding: 10px 15px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; }
        button:hover { background-color: #45a049; }
        #result { margin-top: 20px; white-space: pre-wrap; }
    </style>
</head>
<body>
    <div class="container">
        <h1>XLS文件上传测试</h1>
        <div class="upload-area" id="upload-area">
            <p>点击或拖拽XLS文件到此处上传</p>
            <button id="select-file-btn">选择文件</button>
            <input type="file" id="file-input" accept=".xls">
        </div>
        <div>
            <h3>测试结果:</h3>
            <pre id="result">等待上传文件...</pre>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const uploadArea = document.getElementById('upload-area');
            const fileInput = document.getElementById('file-input');
            const selectFileBtn = document.getElementById('select-file-btn');
            const resultDiv = document.getElementById('result');

            // 检查SheetJS库是否加载
            console.log('SheetJS库是否可用:', typeof XLSX !== 'undefined');
            updateResult('SheetJS库是否可用: ' + (typeof XLSX !== 'undefined' ? '是' : '否'));
            if (typeof XLSX !== 'undefined') {
                updateResult('SheetJS版本: ' + (XLSX.version || '未知'));
            }

            // 选择文件按钮点击事件
            selectFileBtn.addEventListener('click', function() {
                fileInput.click();
            });

            // 文件选择事件
            fileInput.addEventListener('change', function(event) {
                handleFileUpload(event.target.files);
            });

            // 拖放事件
            uploadArea.addEventListener('dragover', function(e) {
                e.preventDefault();
                uploadArea.style.backgroundColor = '#f0f0f0';
            });

            uploadArea.addEventListener('dragleave', function() {
                uploadArea.style.backgroundColor = '';
            });

            uploadArea.addEventListener('drop', function(e) {
                e.preventDefault();
                uploadArea.style.backgroundColor = '';
                handleFileUpload(e.dataTransfer.files);
            });

            // 处理文件上传
            function handleFileUpload(files) {
                if (!files || files.length === 0) return;

                const file = files[0];
                const fileExtension = file.name.split('.').pop().toLowerCase();

                if (fileExtension !== 'xls') {
                    updateResult('错误: 请上传XLS格式的文件');
                    return;
                }

                updateResult('正在处理文件: ' + file.name);

                if (typeof XLSX === 'undefined') {
                    updateResult('错误: SheetJS库未加载');
                    return;
                }

                const reader = new FileReader();
                reader.onload = function(e) {
                    try {
                        const data = new Uint8Array(e.target.result);
                        const workbook = XLSX.read(data, { type: 'array' });
                        // 假设我们只处理第一个工作表
                        const firstSheetName = workbook.SheetNames[0];
                        updateResult('正在解析工作表: ' + firstSheetName);
                        const worksheet = workbook.Sheets[firstSheetName];
                        // 转换为JSON
                        const jsonData = XLSX.utils.sheet_to_json(worksheet);
                        updateResult('解析成功，找到 ' + jsonData.length + ' 条记录');
                        updateResult('解析结果:\n' + JSON.stringify(jsonData, null, 2));

                        // 格式化记录
                        const records = formatExcelRecords(jsonData);
                        updateResult('格式化后的记录数: ' + records.length);
                        updateResult('格式化结果:\n' + JSON.stringify(records, null, 2));

                    } catch (error) {
                        updateResult('解析文件失败: ' + error.message);
                        console.error('解析文件失败:', error);
                    }
                };
                reader.readAsArrayBuffer(file);
            }

            // 格式化Excel记录
            function formatExcelRecords(jsonData) {
                const records = [];

                jsonData.forEach(row => {
                    // 尝试获取必要的字段
                    const date = row.date || row.日期;
                    // 兼容两种字段名格式：customerName、customer和客户名称
                    const customerName = row.customerName || row.customer || row.客户名称;
                    // 兼容products和商品字段
                    let products = row.products || row.商品;

                    if (date && customerName && products) {
                        // 如果products是字符串
                        if (typeof products === 'string') {
                            // 尝试解析为JSON
                            try {
                                products = JSON.parse(products);
                            } catch (e) {
                                // 如果JSON解析失败，尝试解析导出的字符串格式
                                try {
                                    products = parseProductString(products);
                                } catch (e2) {
                                    console.error('解析商品数据失败:', row, e2);
                                    updateResult('解析商品数据失败: ' + e2.message);
                                    return;
                                }
                            }
                        }

                        // 确保products是数组
                        if (!Array.isArray(products)) {
                            console.error('商品数据不是数组:', row);
                            updateResult('错误: 商品数据不是数组');
                            return;
                        }

                        // 格式化记录
                        const record = {
                            date: date,
                            customerName: customerName,
                            products: products,
                            totalAmount: parseFloat(row.totalAmount || row.金额 || 0)
                        };

                        records.push(record);
                    } else {
                        updateResult('跳过无效记录(缺少必填字段): ' + JSON.stringify(row));
                    }
                });

                return records;
            }

            // 解析导出的产品字符串格式
            function parseProductString(productStr) {
                const products = [];
                // 匹配格式：商品名称(重量kg)
                const regex = /([^()]+)\((\d+(?:\.\d+)?)kg\)/g;
                let match;

                while ((match = regex.exec(productStr)) !== null) {
                    const name = match[1].trim();
                    const weight = parseFloat(match[2]);
                    // 假设价格为0，实际使用时可能需要从其他地方获取
                    products.push({ name, weight, price: 0 });
                }

                if (products.length === 0) {
                    throw new Error('无法解析商品格式: ' + productStr);
                }

                return products;
            }

            // 更新结果显示
            function updateResult(message) {
                resultDiv.textContent += '\n' + message;
                console.log(message);
            }
        });
    </script>
</body>
</html>